<template>
  <div class="container">
    <!-- {{fileDirectoryList[0].fileName}} -->
    <ul>
      <li style="cursor:pointer" v-if="flag" @click="returnToSuperior" title="返回上级" :class="{active:currentIndex==0}"  @mouseenter="enter(0)" @mouseleave="leave()">.. <svg-icon icon-class="folder"></svg-icon></li>
      <li v-for="(item,index) in new_fileDirectoryList" style="cursor:pointer"
        @click="searchSubordinate(item,index+1)" @mouseenter="enter(index+1)" @mouseleave="leave()"
         :class="{active:currentIndex==index+1,clickActive:clickIndex==index+1}" :key="index">
        <span v-if="item.directory">
          <svg-icon icon-class="directory"></svg-icon>
        </span>
        <span v-else>  <svg-icon icon-class="folder"></svg-icon></span>
        {{item.fileName}}
      </li>
    </ul>
  </div>
</template>

<script>
import { getSearchSubordinate } from "@/api/sourceDetail";
export default {
  props: {
    fileDirectoryList: {
      type: Array,
      default: () => []
    },
    rowKey: {
      type: String,
      default: () => ""
    }
  },

  data() {
    return {
      new_fileDirectoryList: [],
      currentIndex: null,
      clickIndex: null,
      flag: false,
      fileAbsolutePath: ""
    };
  },
  computed: {
    currentNodeItem() {
      return this.$store.state.project.flowData.currentNodeItem;
    }
  },
  watch: {
    fileDirectoryList: {
      handler(val) {
        this.new_fileDirectoryList = val;
      }
    }
  },
  methods: {
    enter(index) {
      this.currentIndex = index;
    },
    leave() {
      this.currentIndex = null;
    },
    returnToSuperior() {
      let newStr = "";
      newStr = this.currentNodeItem.modelPath

        .split("\\")
        .slice(0, this.currentNodeItem.modelPath.split("\\").length - 1)
        .join("\\");
      let str = "";
      str = this.fileAbsolutePath

        .split("\\")
        .slice(0, this.fileAbsolutePath.split("\\").length - 1)

        .join("\\");
      this.fileAbsolutePath = str;
      if (str.split("\\").length - 1 === newStr.split("\\").length) {
        this.flag = false;
      } else {
        // this.flag = true;
      }
      let formData = new FormData();
      formData.append("filePath", str);

      getSearchSubordinate(formData).then(res => {
        if (res.status == "SUCCESS") {
          this.new_fileDirectoryList = res.data;
        } else {
          this.$notify({
            message: res.message,
            type: "error"
          });
        }
      });
    },
    searchSubordinate(e, index) {
      this.currentIndex = null;
      this.clickIndex = null;

      if (!e.directory) {
        this.fileAbsolutePath = e.fileAbsolutePath;
        this.flag = true;
        let formData = new FormData();
        formData.append("filePath", e.fileAbsolutePath);
        getSearchSubordinate(formData).then(res => {
          if (res.status == "SUCCESS") {
            this.new_fileDirectoryList = res.data;
          } else {
            this.$notify({
              message: res.message,
              type: "error"
            });
          }
        });
      } else {
        this.currentIndex = index;
        this.clickIndex = index;
        this.$emit("selectFileId", e.fileAbsolutePath);
        // let { id, runId } = this.$route.query;
        // console.log("%c Line:115 🌰 runId", "color:#fca650", runId);
        // console.log("%c Line:115 🥤 id", "color:#465975", id);
      }
    }
  },
  components: {}
};
</script>

<style scoped>
.container {
  height: 400px;
  max-height: 400px;
}
.active {
  background-color: rgb(218, 218, 218);
  color: #3e3e3e;
}
.clickActive {
  background-color: #ccc;
  color: #fff;
}
</style>
